/* eslint-disable vue/multi-word-component-names */ /* eslint-disable
vue/multi-word-component-names */

<template>
  <div class="login" id="login">
    <a href="javascript:;" class="log-close"><i class="icons close"></i></a>
    <div class="log-bg">
      <div class="log-cloud cloud1"></div>
      <div class="log-cloud cloud2"></div>
      <div class="log-cloud cloud3"></div>
      <div class="log-cloud cloud4"></div>

      <div class="log-logo" v-if="status==3">注册您的账号!</div>
      <div class="log-logo" v-if="status==0">注册失败请检查输入是否合法!</div>
       <div class="log-logo" v-if="status==1">注册成功</div>
        <div class="log-logo" v-if="status==2">账号已被注册</div>
      <div class="log-text">Zor-video</div>
    </div>
    <div class="log-email">
      <input
        type="text"
        placeholder="名称"
        :class="'log-input' + (nickName == '' ? ' log-input-empty' : '')"
        v-model="nickName"
      />
      <input
        type="text"
        placeholder="账号"
        :class="'log-input' + (account == '' ? ' log-input-empty' : '')"
        v-model="account"
      /><input
        type="password"
        placeholder="密码"
        :class="'log-input' + (password == '' ? ' log-input-empty' : '')"
        v-model="password"
      />
      <input
        type="password"
        placeholder="验证码"
        :class="'log-input captcha' + (captcha == '' ? ' log-input-empty' : '')"
        v-model="captcha"
      />
      <img src="/api/register/captcha" style="width: 100px" />
      <a href="javascript:;" class="log-btn" @click="Register">注册</a>

      <router-link class="register" to="/login">返回登录</router-link>
    </div>
    <Loading v-if="isLoging" marginTop="-30%"></Loading>
  </div>
</template>

<script>
import Loading from "../Loading.vue";
import sha from "./sha1.min.js";
import axios from 'axios'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Register",
  data() {
    return {
      isLoging: false,
      account: "",
      password: "",
      captcha: null,
      nickName: "",
      status:3
    };
  },
  components: {
    Loading,
  },
  mouted() {},
  methods: {
    //注册逻辑
    Register() {
      if (this.account != "" && this.password != "") {
        this.toRegister();
      }
    },

    toRegister() {
      //一般要跟后端了解密码的加密规则
      //这里例子用的哈希算法来自./js/sha1.min.js
      let password = sha(sha(this.password));

      //需要想后端发送的登录参数
      let RegisterParams = {
        account: this.account,
        password,
        nickName: this.nickName,
        captcha: this.captcha,
        status:3
      };

      //设置在登录状态
      this.isLoging = true;
      
      //请求后端,比如:
      axios
        .post("/api/register/doRegister", {
          ...RegisterParams
        })
        .then((response) => {
          if (response.data.status == 1) {
            window.location.href='/index'
          }
          if(response.data.status ==2 ||response.data.status ==0 )
          this.status=response.data.status
          this.isLoging=false;
          console.log(response)
        })
        .catch((response) => {
          console.log("发送登录请求失败！" + response);
        });

      
    },
  },
};
</script>

<style scoped>
.login {
  position: fixed;
  overflow: hidden;
  left: 50%;
  margin-left: -250px;
  top: 50%;
  margin-top: -350px;
  width: 500px;
  min-height: 555px;
  z-index: 10;
  right: 140px;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 16px -5px #070707;
  box-shadow: 0px 3px 16px -5px #070707;
}
.log-close {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 1;
}
.log-close:hover .icons {
  transform: rotate(180deg);
}
.log-close .icons {
  opacity: 1;
  transition: all 0.3s;
}
.log-cloud {
  background-image: url(../../assets/images/login-cloud.png);
  width: 63px;
  height: 40px;
  position: absolute;
  z-index: 1;
}
.login .cloud1 {
  top: 21px;
  left: -30px;
  transform: scale(0.6);
  animation: cloud1 20s linear infinite;
}
.login .cloud2 {
  top: 87px;
  right: 20px;
  animation: cloud2 19s linear infinite;
}
.login .cloud3 {
  top: 160px;
  left: 5px;
  transform: scale(0.8);
  animation: cloud3 21s linear infinite;
}
.login .cloud4 {
  top: 150px;
  left: -40px;
  transform: scale(0.4);
  animation: cloud4 19s linear infinite;
}
.log-bg {
  background: url(../../assets/images/login-bg.jpg);
  width: 100%;
  height: 312px;
  overflow: hidden;
}
.log-logo {
  height: 80px;
  margin: 120px auto 25px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 40px;
}
.log-text {
  color: #fff;
  font-size: 13px;
  text-align: center;
  margin: 0 auto;
}
.log-logo,
.log-text {
  z-index: 2;
}
.icons {
  background: url(../../assets/images/icons.png) no-repeat;
  display: inline-block;
}
.close {
  height: 16px;
  width: 16px;
  background-position: -13px 0;
}
.login-email {
  height: 17px;
  width: 29px;
  background-position: -117px 0;
}

.log-btns {
  padding: 15px 0;
  margin: 0 auto;
}
.log-btn {
  width: 402px;
  display: block;
  text-align: left;
  line-height: 50px;
  margin: 0 auto 5px;
  height: 50px;
  color: #fff;
  font-size: 13px;
  -webkit-border-radius: 5px;
  background-color: #3b5999;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}
.log-btn.tw {
  background-color: #13b4e9;
}
.log-btn.email {
  background-color: #2b3b39;
}
.log-btn:hover,
.log-btn:focus {
  color: #fff;
  opacity: 0.8;
}

.log-email {
  text-align: center;
  margin-top: 20px;
}
.log-email .log-btn {
  background-color: #84b0ea;
  text-align: center;
}
.log-input-empty {
  border: 1px solid #f37474 !important;
}
.isloading {
  background: #d6d6d6;
}
.log-btn .icons {
  margin-left: 30px;
  vertical-align: middle;
}
.log-btn .text {
  left: 95px;
  line-height: 50px;
  text-align: left;
  position: absolute;
}
.log-input {
  width: 370px;
  overflow: hidden;
  padding: 0 15px;
  font-size: 13px;
  border: 1px solid #ebebeb;
  margin: 0 auto 15px;
  height: 48px;
  line-height: 48px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.captcha {
  width: 270px;
}
.log-input.warn {
  border: 1px solid #f88787;
}
.register {
  color: #1d4b82;
  font-size: 14px;
}

@-webkit-keyframes cloud1 {
  0% {
    left: 200px;
  }
  100% {
    left: -130px;
  }
}
@keyframes cloud1 {
  0% {
    left: 200px;
  }
  100% {
    left: -130px;
  }
}

@-webkit-keyframes cloud2 {
  0% {
    left: 500px;
  }
  100% {
    left: -90px;
  }
}
@keyframes cloud2 {
  0% {
    left: 500px;
  }
  100% {
    left: -90px;
  }
}

@-webkit-keyframes cloud3 {
  0% {
    left: 620px;
  }
  100% {
    left: -70px;
  }
}
@keyframes cloud3 {
  0% {
    left: 620px;
  }
  100% {
    left: -70px;
  }
}
@-webkit-keyframes cloud4 {
  0% {
    left: 100px;
  }
  100% {
    left: -70px;
  }
}
@keyframes cloud4 {
  0% {
    left: 100px;
  }
  100% {
    left: -70px;
  }
}
</style>
